<template>
	<view>
		<!-- #ifdef MP -->
		<uni-nav-bar :shadow="false" :border="false" @clickRight="goBack">
			<!-- 中间搜索框 -->
			<view
				class="flex justify-center align-center rounded text-muted bg-light flex-1 mt-1"
				style="margin-left: -46upx;height: 60upx;"
				@tap="openSearch"
			>
				<view class="iconfont icon-sousuo mr-1"></view>搜索帖子
			</view>
			<!-- 右边图标 -->
			<block slot="right">
				<view class="text-dark font">取消</view>
			</block>
		</uni-nav-bar>
		<!-- #endif -->
		<!-- tab 选项卡 导航 -->
		<view class="flex align-center" style="height: 100rpx;">
			<view
				class="flex-1 flex align-center justify-center"
				v-for="(item, index) in tabBars"
				:key="index"
				:class="index === tabIndex ? 'font-lg font-weight-bold text-main' : 'font-md'"
				@click="changeTab(index)"
				>{{ item.name }}
				<text v-if="item.num > 0" class="ml-1">
					<!-- 数量使用过滤器  -->
					{{ item.num | formatNum }}</text
				>
			</view>
		</view>
		<!-- 列表详情 -->
		<swiper :duration="300" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
			<!-- 监听当前列表的 触底事件 @scrolltolower-->
			<swiper-item v-for="(item, index) in newsList" :key="index">
				<scroll-view scroll-y="true" :style="'height:' + scrollH + 'px;'" @scrolltolower="loadmore(index)">
					<!-- 有数据时 展示 -->
					<template v-if="item.list.length > 0">
						<!-- 测试滚动区域 -->
						<!-- <view v-for="i in 100" :key="i">{{i}}</view> -->
						<block v-for="(itemL, indexL) in item.list" :key="indexL">
							<!-- 引入 好友列表 组件 -->
							<FriendsList :item="itemL" :index="indexL"></FriendsList>
						</block>
						<!-- 上拉加载 -->
						<loadMore v-if="item.list.length > 8" :loadmore="item.loadmore"></loadMore>
					</template>
					<!-- --------------------------------------------- -->
					<!-- 无数据时 -->
					<template v-else>
						<noThing></noThing>
					</template>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	// 引入上拉加载组件
	import loadMore from '@/components/common/load-more.vue';
	// 引入兜底样式组件
	import noThing from '@/components/common/no-thing.vue';
	// 引入 好友列表 组件
	import FriendsList from '@/components/friends-list/friends-list.vue';
	export default {
		components: {
			loadMore,
			noThing,
			FriendsList,
		},
		data() {
			return {
				// 列表高度
				scrollH: 600,
				// 默认选中 第一个选项卡
				tabIndex: 0,
				// 选项卡数据
				tabBars: [
					{
						name: '互关',
						num: 0,
						key: 'friends', //互关列表
					},
					{
						name: '关注',
						num: 0,
						key: 'follows', // 关注列表
					},
					{
						name: '粉丝',
						num: 0,
						key: 'fens', // 粉丝列表
					},
				],
				// 列表数据
				newsList: [],
			};
		},
		// 监听原生标题 搜索栏 点击事件 ------------------------------------
		onNavigationBarSearchInputClicked() {
			// 跳转搜索用户页面
			this.openSearch();
		},
		// 监听原生标题 按钮点击事件 --------------------------------------
		onNavigationBarButtonTap() {
			uni.navigateBack({
				delta: 1,
			});
		},
		// 监听页面加载 -----------------------------------------------
		onLoad() {
			// 异步获取 系统信息
			uni.getSystemInfo({
				success: (res) => {
					// console.log(res); 将rpx转换为px 使用uni.upx2px()
					//  减去 顶部选项卡的高度
					this.scrollH = res.windowHeight - uni.upx2px(100);
					// console.log(this.scrollH);
				},
			});
			// 根据选项生成列表
			this.getData();
		},
		// 过滤器
		filters: {
			// 过滤 数量超过99的
			formatNum(value) {
				return value > 99 ? '99+' : value;
			},
		},
		methods: {
			// 跳转搜索用户页面
			openSearch() {
				uni.navigateTo({
					// ?type=user 搜索用户
					url: '../search/search?type=user',
				});
			},
			// 请求 统计用户相关 数据  接口
			getCunts() {
				this.$H
					.get(
						'/user/getcounts/' + this.user.id,
						{},
						{
							token: true,
							notoast: true,
						},
					)
					.then((res) => {
						this.tabBars[0].num = res.friend_count; // 互关数
						this.tabBars[1].num = res.withfollow_count; // 关注数
						this.tabBars[2].num = res.withfen_count; // 粉丝数
					});
			},
			// 获取列表数据 -------------------------------------------
			getData() {
				// 存放 循环好的，列表数据
				const arr = [];
				// 循环遍历 顶部选项卡数据
				// 根据多少个选项 生成多少个模版 ，再赋值给列表数据newsList
				for (let i = 0; i < this.tabBars.length; i++) {
					// 生成列表模版数据
					let obj = {
						// 三种状态 1. 上拉加载更多 2. 加载中... 3. 没有更多了
						loadmore: '上拉加载更多',
						list: [],
						page: 1, //分页
						// 用于判断，列表数据是否 重复加载
						firstLoad: false,
					};
					arr.push(obj);
				}
				this.newsList = arr;
				// 获取列表数据
				this.getList();
			},
			// 获取列表数据
			getList() {
				//  获取到当前 分类的 下标
				let index = this.tabIndex;
				// 获取指定分类 的 ID
				let id = this.tabBars[index].id;
				// 获取指定 列表数据 的 页数
				let page = this.newsList[index].page;
				// 判断 是否处于 第一页 列表数据（如果是就是用户在刷新，否则追加数据）
				let isRefresh = page === 1;

				// 获取 指定文章分类下的文章列表 接口请求
				this.$H
					.get(
						'/' + this.tabBars[index].key + '/' + page,
						{},
						{
							token: true,
							noCheck: true, // 不去验证token，接口不需要传token
						},
					)
					.then((res) => {
						// console.log(res);
						// 循环获取到，指定的列表数据，要循环遍历一下
						let list = res.list.map((v) => {
							return {
								id: v.id, // 用户id
								avatarImg: v.userpic, //头像
								username: v.username, // 用户名
								sex: v.userinfo.sex, // 0:未知，1:男 2:女
								age: v.userinfo.age, // 年龄
								isFollow: index !== 2, // 是否关注
							};
						});
						/* 根据获取到 指定id分类，赋值列表数据 
					       判断 是否处于 第一页 列表数据
					      （如果是 那用户正在刷新页面，否则追加数据）
					       加载更多[当前页数据，下一页数据]*/
						this.newsList[index].list = isRefresh ? list : [...this.newsList[index].list, ...list];
						/* 如果当前 列表数据<10条 ，展示'没有更多了'否则‘下拉加载更多’*/
						this.newsList[index].loadmore = list.length < 10 ? '没有更多了' : '上拉加载更多';
						// 判断是否 重复加载列表数据
						if (isRefresh) {
							this.newsList[index].firstLoad = true;
						}
					})
					.catch((err) => {
						// 如果未获取到数据
						if (!isRefresh) {
							// 如果不是刷新的情况下，退回上一页
							this.newsList[index].page--;
						}
					});
			},
			// 切换 tab 选项卡
			changeTab(index) {
				this.tabIndex = index;
			},
			// 监听swiper滑动 ----------------------------------------
			onChangeTab(e) {
				// 分类列表滑动，顶部选项卡跟随切换
				this.changeTab(e.detail.current);
				// 判断是否首次 加载， false为 还未加载数据
				if (!this.newsList[e.detail.current].firstLoad) {
					this.getList();
				}
			},
			// 上拉加载更多 ，监听事件 ----------------------------------
			loadmore(index) {
				// 先拿到当前列表
				let item = this.newsList[index];
				// 判断是否处于可加载状态（上拉加载更多) 只请求一次接口
				if (item.loadmore !== '上拉加载更多') return;
				// 修改当前列表加载状态
				item.loadmore = '加载中...';
				// console.log('上拉加载更多');
				/* 请求 指定分类 下的列表数据
				   展示下一页，要让 当前页数++ */
				item.page++;
				setTimeout(() => {
					this.getList();
				}, 2000);
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			},
		},
	};
</script>

<style lang="scss" scoped></style>
